<template>
  <textarea ref="mde"></textarea>
</template>

<script>
// 详见 https://github.com/sparksuite/simplemde-markdown-editor#configuration
import SimpleMDE from 'simplemde';
import 'simplemde/dist/simplemde.min.css';
export default {
    name: 'd2-mde',
    props: {
        value: {
            type: String,
            required: false,
            default: ''
        },
        initValue: {
            type: String,
            required: false,
            default: ''
        },
        config: {
            type: Object,
            required: false,
            default: () => ({})
        }
    },
    data() {
        return {
            mde: null,
            defaultConfig: {
                autoDownloadFontAwesome: true
            }
        };
    },
    mounted() {
        this.init();
    },
    destroyed() {
        this.mde = null;
    },
    methods: {
        init() {
            const config = Object.assign({}, this.defaultConfig, this.config);

            this.mde = new SimpleMDE({
                ...config,
                initialValue: this.value,
                element: this.$refs.mde
            });
            this.mde.codemirror.on('change', () => {
                this.$emit('input', this.mde.value());
            });
        }
    },
    watch: {
        initValue(newVal, oldVal) {
            this.mde.value(newVal);
        }
    }
};
</script>
